import React, { useState } from 'react';
import { Button, Checkbox, Input, message } from 'antd';
import { WechatOutlined } from '@ant-design/icons';
import { login } from '../../services/auth';
import './styles.scss';

const Login: React.FC = () => {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const [rememberPassword, setRememberPassword] = useState(false);
  const [loading, setLoading] = useState(false);

  const handleLogin = async () => {
    if (!username || !password) {
      message.error('请输入账号和密码');
      return;
    }

    setLoading(true);
    
    try {
      const response = await login({
        username,
        password,
        captcha: '',
        rememberMe: rememberPassword
      });
      
      const { code, message: responseMessage, data } = response;
      
      if (code === 200) {
        message.success('登录成功');
        
        // 只存储用户信息，移除token相关处理
        localStorage.setItem('userInfo', JSON.stringify(data.userInfo));
        
        // 登录成功后跳转到首页
        window.location.href = '/home';
      } else {
        message.error(responseMessage || '登录失败');
      }
    } catch (error) {
      console.error('登录失败:', error);
      message.error('登录失败，请稍后再试');
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="login-container">
      <div className="login-header">
        <div className="logo-section">
          <img src="/logo.png" alt="企云乐" className="logo" />
          <span className="company-name">企云乐</span>
          <span className="slogan">10万+中小商户都在用的云进销存！</span>
        </div>
      </div>
      
      <div className="login-content">
        <div className="login-left">
          <h1 className="main-title">突破企业边界，让进销存更智能</h1>
          <p className="sub-title">1秒开单打印，一键微信对账，手机查库存看利润</p>
          
          <div className="features">
            <div className="feature-item">
              <span className="feature-text">多台设备，轻松同步连接</span>
            </div>
            <div className="feature-illustration">
              {/* 这里是图片展示区域 */}
            </div>
            <p className="bottom-text">让传统进销存向外延伸，与客户相通</p>
          </div>
        </div>

        <div className="login-form">
          <h2 className="form-title">账号登录</h2>
          <Input
            placeholder="请输入账号"
            value={username}
            onChange={(e) => setUsername(e.target.value)}
            className="login-input"
          />
          <Input.Password
            placeholder="请输入密码"
            value={password}
            onChange={(e) => setPassword(e.target.value)}
            className="login-input"
          />
          <div className="password-options">
            <Checkbox
              checked={rememberPassword}
              onChange={(e) => setRememberPassword(e.target.checked)}
            >
              记住密码
            </Checkbox>
            <a href="#" className="forgot-password">忘记密码</a>
          </div>
          <Button 
            type="primary" 
            block 
            className="login-button" 
            onClick={handleLogin}
            loading={loading}
          >
            登 录
          </Button>
          <div className="download-section">
            <Button className="download-button">下载软件版</Button>
            <div className="wechat-service">
              <WechatOutlined />
              <span>微信在线客服</span>
            </div>
          </div>
        </div>
      </div>

      <div className="login-footer">
        <p>© 企云乐进销存 QIYUNLE Co., Ltd. All rights reserved. 粤ICP备15002713号-1</p>
      </div>
    </div>
  );
};

export default Login; 